<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue/vue.js"></script>
</head>
<style>
    #app>div {
        border: 1px solid #000;
    }

    #app>div>div {
        border: 1px solid #000;
    }

    #outer {
        width: 200px;
        padding: 30px;

    }

    #inner {

        height: 30px;

    }
</style>

<body>
    <div id="app">
        <!-- capture事件修饰符是改变事件流的默认处理方式，由默认的冒泡方式改变成捕获方式 -->
        <div id="outer" v-on:click.self="show('外层div被点击')">
            <!-- stop事件修饰符只会弹出一次对话框 -->
            <!-- self事件修饰符仅当一个事件的目标（event.target）是当前元素自身时，才会触发处理函数 -->
            <div id="inner" v-on:click.stop="show('内层div被点击')"> </div>
        </div>
    </div>
    <!-- prevent事件修饰符，程序自动调用event.preventDefault()方法，从而取消事件触发的默认行为 -->
    <a href="https://cn.vuejs.org/" target="_blank" v-on:click.prevent="show('点击链接')"></a>

    <span>
        登录：<input @keyup.enter="show('登录')">
    </span>

</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            show(msg) {
                alert(msg);
                stopPropagation();
            }
        }
    })
</script>

</html>